import React, { useState } from 'react'
import './index.css'
export default function Item({ todo, done, id, todoList, setTodoList }) {
    const [isActive ,setIsActive]= useState(false)
    //鼠标移入变化事件
    const  onMouseRun  = function (booler){
        return ()=>{
            setIsActive(booler)
        }
    }
    //点击多选框事件
    const checkChangeHandle = (e)=>{
         const newtodo = todoList.map(item=>{
            if(item.id === id){
                item.done = !item.done  
            }
            return item
         })
         setTodoList(newtodo)
    }
    //删除事件
    const onClickdelete = ()=>{
        const newTodo = todoList.filter(item => {
            //牛逼写法 好吧! 我算是悟了
            // （item.id是当前点击的值，显然我点击的肯定是当前的id，那么就返回对应的其他不是相同的id值）
            return item.id !== id
        })

    setTodoList(newTodo)
    }
  return (
      <li onMouseEnter={onMouseRun(true)} onMouseLeave={onMouseRun(false)} className={isActive ? 'active' : ''}>
      <label>
        <input type="checkbox" checked={done} onChange={checkChangeHandle}/>
        <span>{todo}</span>
      </label>
      <button onClick={onClickdelete} className="btn btn-danger" style={{ display:isActive?'block':"none" }}>删除</button>
    </li>
  )
}
